<template>
    <div>
        <div class="content-Page-box">
            <div class="content-Page-box-mask" v-if="pagination.loadingFlag"></div>
            <ul class="content-Page-left">
                <li>
                    <i class="el-icon-d-arrow-left" @click="firstPage"></i>
                    <i class="el-icon-arrow-left" @click="prePage"></i>
                </li>
                <li>
                    第
                    <input 
                        type="text" 
                        class="current-page-input" 
                        v-model="pagination.currentPage"
                        @keyup="inputChange"
                    >
                    共{{pagination.totalPage}}页
                </li>
                <li>
                    <i class="el-icon-arrow-right" @click="nextPage"></i>
                    <i class="el-icon-d-arrow-right" @click="lastPage"></i>
                </li>
                <li>
                    <i class="el-icon-refresh-right" @click="refreshFn"></i>
                </li>
            </ul>
            <div class="content-Page-right">显示{{pagination.firstNum}}到{{pagination.endNum}}条，共{{pagination.totalNum}}条信息</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        pagination: Object
    },
    data() {
        return {
            pageData: this.pagination
        }
    },
    watch:{
        pagination: function (newValue, oldValue) {
            this.pageData = newValue;
        }
    },
    methods: {
        inputChange(e) { //输入框值改变
            if(e.keyCode != 8) { //非退格键
                this.pageData.currentPage = this.pageData.currentPage.toString().replace(/[^\d]/g, '')
                if(this.pageData.currentPage > this.pageData.totalPage) {
                    this.pageData.currentPage = this.pageData.totalPage
                }
                if(this.pageData.currentPage < 1) {
                    this.pageData.currentPage = 1;
                }
            }
            
            if(e.keyCode == 13) { //回车键
                this.$emit('cJumpPageFn', this.pageData.currentPage) //页码跳转
            }
        },
        firstPage() { //首页
            this.pageData.currentPage = 1
            this.$emit('cFirstPageFn', this.pageData.currentPage)
        },
        lastPage() { //尾页
            this.pageData.currentPage = this.pageData.totalPage
            this.$emit('cLastPageFn', this.pageData.currentPage)
        },
        prePage() { //上一页
            if(this.pageData.currentPage == 1) {
                this.pageData.currentPage = 1
            }else{
                this.pageData.currentPage--
            }
            this.$emit('cPreFn', this.pageData.currentPage)
        },
        nextPage() { //下一页
            if(this.pageData.currentPage == this.pageData.totalPage) {
                this.pageData.currentPage = this.pageData.totalPage
            }else{
                this.pageData.currentPage++
            }
            this.$emit('cNextFn', this.pageData.currentPage)
        },
        refreshFn() { //刷新
            this.$emit('cRefreshFn')
        }
    }
}
</script>

<style lang="scss" scoped>
    .content-Page-box {
        position: relative;
        width: 100%;
        border: 1px solid #f2f2f2;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .content-Page-box-mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 32px;
            background-color: rgba(255,255,255,.9);
            transition: opacity .3s;
        }
        .content-Page-left {
            height: 32px;
            display: flex;
            li {
                position: relative;
                display: flex;
                align-items: center;
                height: 100%;
                &:nth-of-type(1),
                &:nth-of-type(3) {
                    padding: 0 14px;
                    box-sizing: border-box;
                    font-size: 18px;
                    i:first-child {
                        margin-right: 14px;
                    }
                }
                &:nth-of-type(2),
                &:nth-of-type(4) {
                    padding: 0 14px;
                    box-sizing: border-box;
                }
                &:nth-of-type(4) {
                    font-size: 18px;
                }
                &:nth-of-type(2)::before,
                &:nth-of-type(3)::before,
                &:nth-of-type(4)::before {
                    content: "";
                    position: absolute;
                    top: 6px;
                    left: 0;
                    width: 1px;
                    height: 22px;
                    background-color: #E5E5E5;
                }
                i {
                    cursor: pointer;
                }
                i:hover {
                    color: #409EFF;
                }
                .current-page-input {
                    width: 46px;
                    height: 23px;
                    margin: 0 6px;
                    padding: 0;
                    text-align: center;
                    border: 1px solid #E5E5E5;
                }
            }
        }
        .content-Page-right {
            padding-right: 16px;
            box-sizing: border-box;
        }
    }
</style>